<template>
  <SingerSong @clickItem="goSongDetail" @chooseStyle="chooseStyle" :total="total" :isSong="true" :songList="songList"
    @pageChange="pageChange" :titles="SONGSTYLE" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import SingerSong from "../components/SingerSong.vue"
import { IPageInfo, ISongItem } from "@/fetch/type";
import { getSongListByPage } from "@/fetch/song";
import { useDetail } from "@/utils/useDetail";
const pageInfo = ref<IPageInfo>({ page: 1, pageSize: 15 })
const songList = ref<ISongItem[]>()
const total = ref(0)
const loadingInstance = ElLoading.service({ fullscreen: false, body: true })

// 获取歌曲列表
const getList = async (pageInfo: IPageInfo, style?: string) => {
  const list = await getSongListByPage(pageInfo, style)
  loadingInstance.close()
  songList.value = list.data.data.records
  total.value = list.data.data.total
}
getList(pageInfo.value)

const pageChange = async (page: number, style?: string) => {
  pageInfo.value.page = page
  getList({ ...pageInfo.value, page }, style)

}
const chooseStyle = (style: string) => {
  pageInfo.value.page = 1

  getList({ ...pageInfo.value, page: 1 }, style)
}

const { goSongDetail } = useDetail()

const SONGSTYLE = [
  {
    name: "全部歌单",
    type: "One",
  },
  {
    name: "华语",
    type: "Two",
  },
  {
    name: "粤语",
    type: "Three",
  },
  {
    name: "欧美",
    type: "Four",
  },
  {
    name: "日韩",
    type: "Five",
  },
  {
    name: "轻音乐",
    type: "Six",
  },
  {
    name: "BGM",
    type: "Seven",
  },
  {
    name: "乐器",
    type: "Eight",
  },
];

</script>
<style lang="scss" scoped></style>